<template>
  <div class="customsData">
    <el-table :data="table">
      <el-table-column label="序号" align="center" type="index" width="80">
      </el-table-column>
      <el-table-column label="采购商" >
        <template slot-scope="scope">
          <div class="line">
            <b title="翻译" @click="trans(scope.row.name)">译</b>
            <p :title="scope.row.name" class="more">{{scope.row.name}}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="国家" prop="country" ></el-table-column>
    </el-table>
    <el-pagination v-show="total>0"
                   background align="right"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-size="10"
                   layout="prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </div>
</template>

<script>
    import {translate} from "@/api/common/thirdparty";

    export default {
        name: "CustomsData",
        data() {
            return {
                table: [{
                    name: '采购商',
                    country: 'USA'
                }],
                total: 0,
                currentSize: 10,
                currentPage: 1
            }
        },
        methods: {
            //翻译
            trans(str) {
                translate(str).then(res => {
                    console.log(res)
                })
            },
            handleSizeChange(size) { //  条数发生改变
                this.currentSize = size
                // this.init()
            },
            handleCurrentChange(page) { //页数发生变化
                this.currentPage = page
                // this.init()
            }
        }
    }
</script>

<style scoped lang="scss">
  .customsData {
    .el-table {
      font-size: 13px;

      .cell {
        .line {
          display: flex;
          align-items: center;

          p {
            width: calc(100% - 23px);
          }

          b {
            width: 20px;
            height: 20px;
            color: #fff;
            font-weight: normal;
            border-radius: 50%;
            background: #2a97f9;
            display: inline-block;
            text-align: center;
            font-size: 12px;
            line-height: 20px;
            cursor: pointer;
            margin-right: 3px;
          }
        }

      }
    }
  }
</style>
